import React from 'react';
import ReactDOM from 'react-dom';


// class MyCom extends React.PureComponent { 
class MyCom extends React.Component { 
  state = { 
    num: 1,
    info: { age: 18 }
  }
  add = () => {
    this.setState({
      num: this.state.num + 1,
    })
  }
  addAge = () => {
    // 正解
    this.setState({
      info: { age: this.state.info.age + 1}
    })
  }
  addAgeError = () => {
    // 错解
    const newInfo =  this.state.info
    newInfo.age++
    this.setState({
      info: newInfo
    })

    setTimeout(() => {
      console.log(this.state)
    })
  }
  
  render () {
    return (
      <div>组件：{this.state.num},{this.state.info.age}
        <button onClick={this.add}>+1</button>
        <button onClick={this.addAge}>+1age</button>
        <button onClick={this.addAgeError}>+1ageerror</button>
      </div>
    )
  }
} 
ReactDOM.render(<div>
  <MyCom/>
</div>, 
document.getElementById('root')) 
